<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 捕获JavaScript运行时错误
    window.onerror = function(message, source, lineno, colno, error) {
      console.log('onerror:', message, source, lineno, colno, error);

      // 上报日志到监控系统
      // logErrorToMonitoringSystem({ message, source, lineno, colno, error });

      // 返回true防止进一步冒泡到 window.addEventListener('error')，但视情况而定
      return true;
    };

    // 捕获资源加载错误
    window.addEventListener('error', function(event) {
      console.log('addEventListener-error:', event)
      // if (event.target instanceof HTMLElement) {
      //   // 处理资源加载错误
      //   console.log('Resource load error:', event.target.src || event.target.href);
        
      //   // 上报日志到监控系统
      //   logErrorToMonitoringSystem({
      //     type: 'resource',
      //     url: event.target.src || event.target.href,
      //     tag: event.target.tagName
      //   });
      // }
    }, true);

    // 未处理Promise的处理
    window.addEventListener('unhandledrejection', function(event) {
      console.log('unhandledrejection-error:', event)
    })
    // console.log(a.b) // TODO: 1.运行时错误 两者都能捕获
  </script>
  <!-- <script src="http://128.0.1.1/script1.js"></script> 同2. -->
</head>
<body>
  <!-- <img src="http://128.0.1.1" alt="TODO: 2.资源加载错误 只有ad能捕获"> -->
  <h1 id="h123">onerror和addEventListener钩子测试</h1>
  <script>
    // fetch('https://ab.chatgpt.com/v1/rgstr').catch(e => console.dir(e)) // TODO: 3.fetch报跨域错或者请求错误，抛出的是Promise错误，处理了所以unhandledrejection捕获不到
    // fetch('https://ab.chatgpt.com/v1/rgstr') // TODO: 4.未catch，通过unhandledrejection钩子捕获
    // TODO: 5. 类似axios响应拦截器捕获请求错误

    // TODO: 6.普通Promise抛出未处理错误(对应unhandledrejection钩子)
    /*  【4/6】event.type都是unhandledrejectio
    new Promise((resolve, reject) => {
      reject('普通文本报错～') // event.reason = '普通文本报错～'
    })
    new Promise((resolve, reject) => {
      throw 'throw 抛出文本报错' // event.reason = 'throw 抛出文本报错'
    })
    new Promise((resolve, reject) => {
      reject(new Error('reject抛出Error对象实例')) // event.reason = Error实例（message和stack属性）
    })
    new Promise((resolve, reject) => {
      throw new Error('throw抛出Error实例对象') // 同上
    })
    */
    function pageUnload() {
      let img = new Image()
      img.src = 'https://picsum.photos/200/300' // 有状态码返回
      // img.src = 'https://picsum.photostywte/200/300'
      img.onerror = (event) => {
        console.log('图片加载错误～')
        console.log(event)
      }
      img.onload = (event) => {
        console.log('图片加载成功～')
      }
    }
    

    /* 浏览器检查工具捕获不到这个请求，无状态码返回*/
    // const data = JSON.stringify({ event: 'eooo', timestamp: Date.now() });
    // navigator.sendBeacon('https://picsum.photos/200/300', data);
    // // navigator.sendBeacon('https://example12312.com/track', data);

    // document.addEventListener("visibilitychange", function logData() {
    //   if (document.visibilityState === "hidden") {
    //     // navigator.sendBeacon("/log", analyticsData);
    //     console.log('页面隐藏了～')
    //   }
    // });
    if(document.visibilityState) {
      console.log('22222')
      document.addEventListener("visibilitychange", function() {
        if (document.visibilityState === "hidden") {
          console.log('1111')
          pageUnload() // 请求发出但是onload钩子不会回调
        }
      });
    }
    else {
      document.addEventListener("pagehide", function() {
        pageUnload()
      });
    }
    
  </script>
</body>
</html>